@import "../../utils/common/common.module";


@media all and (max-width: 1600px){
  .outerFrame{
    display:flex;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    //min-width : 336px;
    width : calc((100vw - 48px - 96px - 10px)/4);
    //flex : 1;
    //width : 20%;
    height : 159px;
    background-color : #FFFFFF;
    border-radius: 8px;
    margin-right : 24px;
    margin-bottom: 24px;
    padding-top : 20px;
    padding-left : 24px;
    cursor : pointer;
  }
}
@media all and (min-width:1601px) and (max-width: 2500px){
  .outerFrame{
    display:flex;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    //min-width : 336px;
    width : calc((100vw - 48px - 120px - 10px)/5);
    //flex : 1;
    //width : 20%;
    height : 159px;
    background-color : #FFFFFF;
    border-radius: 8px;
    margin-right : 24px;
    margin-bottom: 24px;
    padding-top : 20px;
    padding-left : 24px;
    cursor : pointer;
  }
}
@media all and (min-width:2501px) and (max-width: 2600px){
  .outerFrame{
    display:flex;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    //min-width : 336px;
    width : calc((100vw - 48px - 144px - 10px)/6);
    //flex : 1;
    //width : 20%;
    height : 159px;
    background-color : #FFFFFF;
    border-radius: 8px;
    margin-right : 24px;
    margin-bottom: 24px;
    padding-top : 20px;
    padding-left : 24px;
    cursor : pointer;
  }
}

@media all and (min-width:2601px){
  .outerFrame{
    display:flex;
    display:-moz-flex;
    display:-webkit-flex;
    display:-ms-flex;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    //min-width : 336px;
    width : calc((100vw - 48px - 192px - 10px)/8);
    //flex : 1;
    //width : 20%;
    height : 159px;
    background-color : #FFFFFF;
    border-radius: 8px;
    margin-right : 24px;
    margin-bottom: 24px;
    padding-top : 20px;
    padding-left : 24px;
    cursor : pointer;
  }
}

.outerFrame:hover{
  border : 1px solid #1B67ff;
}
.item{
  width : 100%;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: space-between;
  //justify-content: center;
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
  color: rgba(0, 0, 0, 0.72);
}
.itemLeft{
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: flex-start;
  align-items: center;
}
.itemTaskName{
  font-weight: 500;
  font-size: 18px;
  line-height: 26px;
  color: rgba(0, 0, 0, 0.87);
  margin-right : 12px;
  //max-width : calc(100% - 52px - 2rem);
  max-width : 200px;
  text-overflow: ellipsis;
  overflow: hidden;
  max-height: 40px;
}

.mediaType{
  width: 40px;
  height: 22px;
  line-height: 22px;
  background: rgba(27,103,255,0.1);
  border-radius: 4px;
  font-weight: 400;
  font-size: 14px;
  text-align: center;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  align-items: center;
  justify-content: center;
}

.draft{
  width: 40px;
  height: 22px;
  background: rgba(255, 136, 0, 0.2);
  //border: 1px solid #FF8800;
  border-radius: 4px;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  align-items: center;
  justify-content: center;
}
.item41{
  width : 100%;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: flex-start;
  align-items: center;
  margin-top:10px;

}
.item41Left{
  margin-right:10px;
  color: rgba(0, 0, 0, 0.72);
  font-weight: 400;
  font-size: 14px;
  line-height: 22px;
}
.item41Right{
  color: #00B365;
  font-weight: 400;
  font-size: 12px;
  line-height: 18px;
}
.item42{
  width : 100%;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: flex-start;
  align-items: center;
  margin-top:10px;
  padding-right : 24px;
}
.item42Left{
  width : 242px;
  width : 100%;
}

.icons2{
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: flex-end;
  align-items: center;
  width : 60px;
  //margin-left:140px;
  margin-right : 24px;
}
.upload{
  margin-right : 10px;
}

.upload:hover{
  color : #1b67ff;
  cursor : pointer;
}

.delete:hover{
  color : #1b67ff;
  cursor : pointer;
}

.deleteWarnInfo{
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: flex-start;
  align-items: center;
}

.tipWarnIcon{
  width : 18px;
  height : 18px;
  border-radius : 50%;
  background-color : #FF8800;
  color : white;
  @extend .displayFlex;
  @extend .flexDirectionRow;
  justify-content: center;
  align-items: center;
}
